<template>
	<div class="chart-four-container">
		<div style="padding: 0.8rem; padding-top: 1.2rem">
			<el-button
				size="mini"
				v-for="(item, index) in buttonLabelOperate"
				:key="item.id"
				:type="activeTab === index ? 'primary' : ''"
				@click="changeIndex(index)"
				>{{ item.label }}</el-button
			>
		</div>

		<div v-if="activeTab === 0">
			<div ref="dayPower" class="dayPower"></div>
		</div>

		<div v-if="activeTab === 1">
			<div ref="dayPowerMeasure" class="dayPowerMeasure"></div>
		</div>

		<div v-if="activeTab === 2">
			<div style="display: flex; justify-content: right; margin-right: 3rem">
				<el-date-picker
					size="small"
					type="month"
					format="YYYY-MM"
					value-format="YYYY-MM"
					class="custom-date-picker"
					v-model="dayPowerElectValue"
					:placeholder="$t('message.form.pageSelectHolder')"
				/>
			</div>
			<div ref="powerElectMatch" class="powerElectMatch"></div>
		</div>

		<div v-if="activeTab === 3">
			<div style="display: flex; justify-content: right; margin-right: 3rem">
				<el-date-picker
					size="small"
					type="month"
					format="YYYY-MM"
					value-format="YYYY-MM"
					v-model="monthElectValue"
                    class="custom-date-picker"
					:placeholder="$t('message.form.pageSelectHolder')"
				/>
			</div>
			<div ref="monthPowerMeasure" class="monthPowerMeasure"></div>
		</div>

		<div v-if="activeTab === 4">
			<div style="display: flex; justify-content: right; margin-right: 3rem">
				<el-date-picker
					size="small"
					type="year"
					format="YYYY"
					value-format="YYYY"
					v-model="yearPowerValue"
                    class="custom-date-picker"
					:placeholder="$t('message.form.pageSelectHolder')"
				/>
			</div>
			<div ref="yearPowerMeasure" class="yearPowerMeasure"></div>
		</div>

		<div v-if="activeTab === 5">
			<div ref="everyYearPowerMeasure" class="everyYearPowerMeasure"></div>
		</div>
	</div>
</template>

<script lang="ts" name="chartIndex">
import 'echarts-wordcloud';
import { useI18n } from 'vue-i18n';
import * as echarts from 'echarts';
import { defineComponent, reactive, toRefs, onMounted, onActivated, nextTick } from 'vue';

export default defineComponent({
	setup() {
		const { t } = useI18n();

		const state = reactive({
			yearPowerValue: '',
			monthElectValue: '',
			dayPowerElectValue: '',
			dayPower: null as HTMLElement | null,
			dayPowerMeasure: null as HTMLElement | null,
			powerElectMatch: null as HTMLElement | null,
			yearPowerMeasure: null as HTMLElement | null,
			monthPowerMeasure: null as HTMLElement | null,
			everyYearPowerMeasure: null as HTMLElement | null,
			activeTab: 0,
			buttonLabelOperate: [
				{
					id: 'alarm',
					label: t('message.mainStationComprehensiveNews.pageDailyPower'),
				},
				{
					id: 'log',
					label: t('message.mainStationComprehensiveNews.pageDaily'),
				},
				{
					id: 'log',
					label: t('message.mainStationComprehensiveNews.pagePowerElectTitle'),
				},
				{
					id: 'log',
					label: t('message.mainStationComprehensiveNews.pageMonth'),
				},
				{
					id: 'log',
					label: t('message.mainStationComprehensiveNews.pageYear'),
				},
				{
					id: 'log',
					label: t('message.mainStationComprehensiveNews.pageEveryYear'),
				},
			],
			isHighResolution: false,
			dayPowerChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: [
						'04:00',
						'04:30',
						'05:00',
						'05:30',
						'06:00',
						'06:30',
						'07:00',
						'07:30',
						'08:00',
						'08:30',
						'09:00',
						'09:30',
						'10:00',
						'10:30',
						'11:00',
						'11:30',
						'12:00',
						'12:30',
						'13:00',
						'13:30',
						'14:00',
						'14:30',
						'15:00',
					],
					axisLabel: {
						interval: 0,
						// rotate: 45,
						formatter: '{value}',
						fontSize: 10,
						color: '#fff',
					},
					axisTick: {
						alignWithLabel: true,
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						fontSize: 10,
						color: '#fff',
					},
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [10, 11, 13, 15, 11, 8, 12, 14, 11, 12, 13, 15, 11, 18, 2, 14, 11, 12, 13, 15, 11, 8, 12, 14, 11, 10],
						type: 'line',
						smooth: true,
					},
				],
			},
			dayChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			monthChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			yearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			everyYearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
		});

		const changeIndex = async (id: number) => {
			state.activeTab = id;

			await nextTick();

			switch (id) {
				case 0:
					initDayPower();
					break;
				case 1:
					initDayPowerMeasure();
					break;
				case 2:
					initPowerElectMatch();
					break;
				case 3:
					initMonthPowerMeasure();
					break;
				case 4:
					initYearPowerMeasure();
					break;
				case 5:
					initEveryYearPowerMeasure();
					break;
				default:
					break;
			}
		};

		// 功率电量对比
		const initPowerElectMatch = () => {
			if (!state.powerElectMatch) return;

			const powerElectMatchElement = state.powerElectMatch;

			powerElectMatchElement.style.height = state.isHighResolution ? '20rem' : '9rem';

			const tooltipConfig = {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999',
					},
				},
			};

			const xAxisConfig = {
				type: 'category',
				data: ['04', '05', '06', '07', '08', '09', '10'],
				axisTick: { show: false },
				axisLabel: { color: '#EBEBEB' },
				axisLine: { lineStyle: { color: '#3498db' } },
			};

			const yAxisConfigs = [
				{
					type: 'value',
					name: '万kWh',
					nameTextStyle: { color: '#EBEBEB' },
					axisLabel: { formatter: '{value}', color: '#EBEBEB' },
					splitLine: {
						lineStyle: {
							color: '#2d4a7a',
							type: 'dashed',
							opacity: 0.6,
						},
					},
				},
				{
					type: 'value',
					name: 'MW',
					nameTextStyle: { color: '#EBEBEB' },
					axisLabel: { formatter: '{value}', color: '#EBEBEB' },
					splitLine: {
						lineStyle: {
							color: '#2d4a7a',
							type: 'dashed',
							opacity: 0.6,
						},
					},
				},
			];

			const seriesData = [
				{
					name: '当前功率',
					type: 'bar',
					barWidth: '35%', // 柱子宽度
					tooltip: {
						valueFormatter: (value: any) => `${value} MW`,
					},
					data: [0.9, 0.3, 0.5, 0.4, 0.1, 0.9, 0.2],
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' },
							],
							global: false,
						},
						borderRadius: [10, 10, 6, 6],
					},
				},
				{
					name: '小时发电量',
					type: 'line',
					yAxisIndex: 1,
					smooth: true,
					tooltip: {
						valueFormatter: (value: any) => `${value} 万kWh`,
					},
					data: [0.05, 0.01, 0, 0.09, 0.02, 0.06, 0.07],
					itemStyle: {
						color: '#E00074',
					},
					lineStyle: {
						width: 2,
						type: 'solid',
					},
				},
			];

			const option = {
				grid: {
					containLabel: true,
					top: 30,
					bottom: state.isHighResolution ? 40 : 0,
					left: state.isHighResolution ? 50 : 10,
					right: state.isHighResolution ? 20 : 5,
				},
				tooltip: tooltipConfig,
				xAxis: [xAxisConfig],
				yAxis: yAxisConfigs,
				series: seriesData,
			};

			const chart = echarts.init(state.powerElectMatch);
			chart.setOption(option);
			window.addEventListener('resize', () => chart.resize());
		};

		// 日功率
		const initDayPower = async () => {
			if (!state.dayPower) return;

			const myChart = echarts.init(state.dayPower);
			state.dayPower.style.height = state.isHighResolution ? '25rem' : '11rem';

			await nextTick();

			myChart.setOption({
				...state.dayPowerChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 20,
					right: state.isHighResolution ? 20 : 5,
				},
			});

			myChart.resize();
		};

		// 日发电量
		const initDayPowerMeasure = async () => {
			if (!state.dayPowerMeasure) return;
			const myChart = echarts.init(state.dayPowerMeasure);

			state.dayPowerMeasure.style.height = state.isHighResolution ? '25rem' : '11rem';

			await nextTick();

			myChart.setOption({
				...state.dayChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: 40,
					left: state.isHighResolution ? 50 : 30,
					right: state.isHighResolution ? 20 : 5,
				},
			});

			myChart.resize();
		};

		//  月发电量
		const initMonthPowerMeasure = async () => {
			if (!state.monthPowerMeasure) return;
			const myChart = echarts.init(state.monthPowerMeasure);

			state.monthPowerMeasure.style.height = state.isHighResolution ? '25rem' : '9rem';

			await nextTick();

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 30,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		//  年发电量
		const initYearPowerMeasure = async () => {
			if (!state.yearPowerMeasure) return;
			const myChart = echarts.init(state.yearPowerMeasure);

			state.yearPowerMeasure.style.height = state.isHighResolution ? '25rem' : '9rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		// 历年发电量
		const initEveryYearPowerMeasure = async () => {
			if (!state.everyYearPowerMeasure) return;
			const myChart = echarts.init(state.everyYearPowerMeasure);
			state.everyYearPowerMeasure.style.height = state.isHighResolution ? '25rem' : '11rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 40,
					right: state.isHighResolution ? 20 : 25,
				},
			});

			myChart.resize();
		};

		onMounted(() => {
			state.isHighResolution = window.innerWidth >= 1600;
			initDayPower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();

			// 获取当前年份、月份
			const currentDate = new Date();
			const currentYear: number = currentDate.getFullYear();
			const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');
			state.yearPowerValue = `${currentYear}`;
			state.monthElectValue = `${currentYear}-${currentMonth}`;
			state.dayPowerElectValue = `${currentYear}-${currentMonth}`;
		});

		// 由于页面缓存原因(keep-alive)
		onActivated(() => {
			initDayPower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();
		});

		return {
			...toRefs(state),
			changeIndex,
		};
	},
});
</script>

<style lang="scss" scoped>
.chart-four-container {
	width: 100%;
	margin: 0 auto;
	padding: 0.9rem;
	padding-top: 0.5rem;
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dayPower {
	width: 100%;
	height: 10rem;
}

.dayPowerMeasure {
	width: 100%;
	height: 10rem;
}

.powerElectMatch {
	width: 100%;
	height: 10rem;
}

.monthPowerMeasure {
	width: 100%;
	height: 10rem;
}

.yearPowerMeasure {
	width: 100%;
	height: 10rem;
}

.everyYearPowerMeasure {
	width: 100%;
	height: 10rem;
}
</style>
